import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'flutter widget',
      home: Scaffold(
        appBar: AppBar(
            title: new Text('二维网格组件',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 20.0, color: Colors.white))),
        body: new MyGridWidget(),
//        body: new GridView(
//          padding: const EdgeInsets.all(4.0),
//          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
//              crossAxisCount: 3, //三列
//              childAspectRatio: 1.0, //宽高比
//              mainAxisSpacing: 4.0,
//              crossAxisSpacing: 4.0),
//          children: <Widget>[
//            new Image.network(
//              'https://img10.360buyimg.com/mobilecms/s600x600_jfs/t7573/142/250320956/340013/9dbcaeba/5991002eNf6a3dded.jpg',
//              fit: BoxFit.fill,
//              color: Colors.red,
//              colorBlendMode: BlendMode.difference,
//            ),
//            new Image.network(
//              'https://img12.360buyimg.com/mobilecms/s600x600_jfs/t1/27858/2/1260/359169/5c10b8bbE229e9a82/70076137bdb751d5.jpg',
//              fit: BoxFit.cover,
//            ),
//            new Image.network(
//              'https://img11.360buyimg.com/mobilecms/s600x600_jfs/t3655/70/19227255/151673/5395e778/5800529aN636e4c5a.jpg',
//              fit: BoxFit.cover,
//            ),
//            new Image.network(
//              'https://img13.360buyimg.com/babel/s360x360_jfs/t1/2202/3/10616/194735/5bcf3336Edf45322d/89e7c13209c9ab49.jpg',
//              fit: BoxFit.cover,
//            ),
//            new Image.network(
//              'https://img13.360buyimg.com/babel/s180x180_jfs/t23824/106/2253048960/334797/b18151f7/5b7a70b8Nf6357a2d.jpg',
//              fit: BoxFit.cover,
//            ),
//            new Image.network(
//              'https://img13.360buyimg.com/babel/s360x360_jfs/t1/17689/32/11931/265698/5c95090bE3e66a961/bb7f9633b3cbc60e.jpg',
//              fit: BoxFit.cover,
//            ),
//            new Image.network(
//              'https://img10.360buyimg.com/mobilecms/s600x600_jfs/t7573/142/250320956/340013/9dbcaeba/5991002eNf6a3dded.jpg',
//              fit: BoxFit.cover,
//            ),
//            new Image.network(
//              'https://img12.360buyimg.com/mobilecms/s600x600_jfs/t1/27858/2/1260/359169/5c10b8bbE229e9a82/70076137bdb751d5.jpg',
//              fit: BoxFit.cover,
//            ),
//            new Image.network(
//              'https://img11.360buyimg.com/mobilecms/s600x600_jfs/t3655/70/19227255/151673/5395e778/5800529aN636e4c5a.jpg',
//              fit: BoxFit.cover,
//            ),
//            new Image.network(
//              'https://img13.360buyimg.com/babel/s360x360_jfs/t1/2202/3/10616/194735/5bcf3336Edf45322d/89e7c13209c9ab49.jpg',
//              fit: BoxFit.cover,
//            ),
//            new Image.network(
//              'https://img13.360buyimg.com/babel/s180x180_jfs/t23824/106/2253048960/334797/b18151f7/5b7a70b8Nf6357a2d.jpg',
//              fit: BoxFit.cover,
//            ),
//            new Image.network(
//              'https://img13.360buyimg.com/babel/s360x360_jfs/t1/17689/32/11931/265698/5c95090bE3e66a961/bb7f9633b3cbc60e.jpg',
//              fit: BoxFit.cover,
//            ),
//            new Image.network(
//              'https://img10.360buyimg.com/mobilecms/s600x600_jfs/t7573/142/250320956/340013/9dbcaeba/5991002eNf6a3dded.jpg',
//              fit: BoxFit.cover,
//            ),
//            new Image.network(
//              'https://img12.360buyimg.com/mobilecms/s600x600_jfs/t1/27858/2/1260/359169/5c10b8bbE229e9a82/70076137bdb751d5.jpg',
//              fit: BoxFit.cover,
//            ),
//            new Image.network(
//              'https://img11.360buyimg.com/mobilecms/s600x600_jfs/t3655/70/19227255/151673/5395e778/5800529aN636e4c5a.jpg',
//              fit: BoxFit.cover,
//            ),
//            new Image.network(
//              'https://img13.360buyimg.com/babel/s360x360_jfs/t1/2202/3/10616/194735/5bcf3336Edf45322d/89e7c13209c9ab49.jpg',
//              fit: BoxFit.cover,
//            ),
//            new Image.network(
//              'https://img13.360buyimg.com/babel/s180x180_jfs/t23824/106/2253048960/334797/b18151f7/5b7a70b8Nf6357a2d.jpg',
//              fit: BoxFit.cover,
//            ),
//            new Image.network(
//              'https://img13.360buyimg.com/babel/s360x360_jfs/t1/17689/32/11931/265698/5c95090bE3e66a961/bb7f9633b3cbc60e.jpg',
//              fit: BoxFit.cover,
//            )
//          ],
//        ),
      ),
    );
  }
}

class MyGridWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new GridView.extent(
      maxCrossAxisExtent: 150.0,
      crossAxisSpacing: 10.0,
      mainAxisSpacing: 10.0,
      padding: const EdgeInsets.all(10.0),
      childAspectRatio: 1.0,
      children: <Widget>[
        new Image.network(
          'https://img10.360buyimg.com/mobilecms/s600x600_jfs/t7573/142/250320956/340013/9dbcaeba/5991002eNf6a3dded.jpg',
          fit: BoxFit.fill,
          color: Colors.yellowAccent,
          colorBlendMode: BlendMode.difference,
        ),
        new Image.network(
          'https://img12.360buyimg.com/mobilecms/s600x600_jfs/t1/27858/2/1260/359169/5c10b8bbE229e9a82/70076137bdb751d5.jpg',
          fit: BoxFit.cover,
        ),
        new Image.network(
          'https://img11.360buyimg.com/mobilecms/s600x600_jfs/t3655/70/19227255/151673/5395e778/5800529aN636e4c5a.jpg',
          fit: BoxFit.cover,
        ),
        new Image.network(
          'https://img13.360buyimg.com/babel/s360x360_jfs/t1/2202/3/10616/194735/5bcf3336Edf45322d/89e7c13209c9ab49.jpg',
          fit: BoxFit.cover,
        ),
        new Image.network(
          'https://img13.360buyimg.com/babel/s180x180_jfs/t23824/106/2253048960/334797/b18151f7/5b7a70b8Nf6357a2d.jpg',
          fit: BoxFit.cover,
        ),
        new Image.network(
          'https://img13.360buyimg.com/babel/s360x360_jfs/t1/17689/32/11931/265698/5c95090bE3e66a961/bb7f9633b3cbc60e.jpg',
          fit: BoxFit.cover,
        ),
        new Image.network(
          'https://img10.360buyimg.com/mobilecms/s600x600_jfs/t7573/142/250320956/340013/9dbcaeba/5991002eNf6a3dded.jpg',
          fit: BoxFit.cover,
        ),
        new Image.network(
          'https://img12.360buyimg.com/mobilecms/s600x600_jfs/t1/27858/2/1260/359169/5c10b8bbE229e9a82/70076137bdb751d5.jpg',
          fit: BoxFit.cover,
        ),
        new Image.network(
          'https://img11.360buyimg.com/mobilecms/s600x600_jfs/t3655/70/19227255/151673/5395e778/5800529aN636e4c5a.jpg',
          fit: BoxFit.cover,
        ),
        new Image.network(
          'https://img13.360buyimg.com/babel/s360x360_jfs/t1/2202/3/10616/194735/5bcf3336Edf45322d/89e7c13209c9ab49.jpg',
          fit: BoxFit.cover,
        ),
        new Image.network(
          'https://img13.360buyimg.com/babel/s180x180_jfs/t23824/106/2253048960/334797/b18151f7/5b7a70b8Nf6357a2d.jpg',
          fit: BoxFit.cover,
        ),
        new Image.network(
          'https://img13.360buyimg.com/babel/s360x360_jfs/t1/17689/32/11931/265698/5c95090bE3e66a961/bb7f9633b3cbc60e.jpg',
          fit: BoxFit.cover,
        ),
        new Image.network(
          'https://img10.360buyimg.com/mobilecms/s600x600_jfs/t7573/142/250320956/340013/9dbcaeba/5991002eNf6a3dded.jpg',
          fit: BoxFit.cover,
        ),
        new Image.network(
          'https://img12.360buyimg.com/mobilecms/s600x600_jfs/t1/27858/2/1260/359169/5c10b8bbE229e9a82/70076137bdb751d5.jpg',
          fit: BoxFit.cover,
        ),
        new Image.network(
          'https://img11.360buyimg.com/mobilecms/s600x600_jfs/t3655/70/19227255/151673/5395e778/5800529aN636e4c5a.jpg',
          fit: BoxFit.cover,
        ),
        new Image.network(
          'https://img13.360buyimg.com/babel/s360x360_jfs/t1/2202/3/10616/194735/5bcf3336Edf45322d/89e7c13209c9ab49.jpg',
          fit: BoxFit.cover,
        ),
        new Image.network(
          'https://img13.360buyimg.com/babel/s180x180_jfs/t23824/106/2253048960/334797/b18151f7/5b7a70b8Nf6357a2d.jpg',
          fit: BoxFit.cover,
        ),
        new Image.network(
          'https://img13.360buyimg.com/babel/s360x360_jfs/t1/17689/32/11931/265698/5c95090bE3e66a961/bb7f9633b3cbc60e.jpg',
          fit: BoxFit.cover,
        )
      ],
    );
  }
}
